<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.3.4/vue-resource.js"></script>
</head>
<body>
<div id="app">
    <input type="button" @click="xlGet" value="get"/>
    <input type="button" @click="xlGet2" value="没有地址的get"/>
    <input type="button" @click="xlPost" value="post"/>
    <input type="button" @click="xlJsonp" value="Jsonp"/>
</div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            toUrl: 'demo1.html',
            wrongUrl: 'demo1111.html',
            postUrl: 'demo1.html',
            jsonpUrl: 'http://localhost:8080/'
        },
        methods: {
            print: function (response) {
                console.log(response.body);
                alert(response.status);
            }, xlGet: function () {
                this.httpGet(this.toUrl);
            }, xlGet2: function () {
                this.httpGet(this.wrongUrl);
            },
            xlPost: function () {
                this.$http.post(this.postUrl).then(response => {
                    this.print(response);
                });
            },
            xlJsonp: function () {
                //解决跨域
                this.$http.jsonp(this.jsonpUrl).then(response => {
                    this.print(response);
                });
            }, httpGet: function (toUrl = this.toUrl) {
                this.$http.get(toUrl).then(response => {
                    this.print(response);
                }, error => {
                    console.log("11");
                });
            }
        }
    })
</script>
</html>
